<template>
	<view class="layout">
		<view class="title">添加二级分类</view>
		<view class="form">
			<view class="opt">
				<text class="label">请选择一级分类:</text>
				<!-- 下拉组件 -->
				<view>
					<picker @change="categorysChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="opt">
				<text class="label">二级分类名称:</text>
				<!-- v-model="input" 数据双向绑定 -->
				<input v-model="input" class="input" type="text" placeholder="请输入二级分类名称">
			</view>
			<view class="opt">
				<!--  @click="addCategorysChild" 绑定点击事件 -->
				<button @click="addCategorysChild" class="button">添加</button>
			</view>
		</view>

		<view class="table table-2">
			<view class="tr">
				<view class="th">序号</view>
				<view class="th">一级分类</view>
				<view class="th">二级分类</view>
				<view class="th">操作</view>
			</view>
			<!-- 循环二级菜单数据 -->
			<view class="tr" v-for="(item,num) in  categoryList">
				<view class="td">{{num + 1}}</view>
				<view class="td">{{item.text}}</view>
				<view class="td">{{item.name}}</view>
				<view class="td">
					<!-- @click="removeCategoryChild(item._id)" 用于点击删除数据 -->
					<text class="txt" @click="removeCategoryChild(item._id)">删除</text>
				</view>
			</view>
		</view>
	
	
		<view class="msg" v-if="categoryList.length == 0">
			<text>暂无二级分类菜单~~</text>
		</view>
	</view>
</template>

<script setup>
// 导入Vue框架的ref函数
import { ref } from 'vue'

// 导入云数据库的集合引用
// @/  代表项目根路径  /topic_admin
import { categorysChild , categorys } from '@/common/db/index.js'

// 定义变量记录一级分类名称
let text = "";

// 定义变量记录输入框的值
const input = ref("");

// 定义索引值
const index = ref(0);

// 定义数组 （一级菜单）
const array = ref([]);

// 定义数组记录二级菜单
const categoryList = ref([]);

// 定义方法
const categorysChange = (e)=> {
	// e.detail.value; // 选择的分类的下标
	index.value = e.detail.value;
	// 赋值,获取一级分类名称
	text = array.value[e.detail.value];
}

// 获取一级分类列表
// ES6  Promise语法
const listCategorys = async () => {
	await categorys.get().then(res=> {
		// 获取查询的结果
		let result = res.result;
		// 检查数据
		console.log(result.data);
		// ES6 数组API
		let newArr = result.data.map(item => item.text )
		// 赋值
		array.value = newArr;
		// 设置默认值
		text = newArr[0];
		
	}).catch(err=> console.log(err))
}

// 获取二级菜单相关的数据
const listCategorysChild = async ()=> {
	await categorysChild.get().then(
		res=> {
			let result = res.result;
			//赋值给categoryList变量
			categoryList.value = result.data;
		}
	)
	.catch(err=> console.log(err))
}

// 添加二级分类
const addCategorysChild = async () => {
	// 判断输入框是否有值
	console.log({name: input.value, text });//检查数据
	if(input.value == "" || text =="") {
		uni.showToast({
			title:"缺少参数~！",
			icon:"none"
		})
		return false;
	}
	// 判断数据表是否存在该分类
	await categorysChild.where({name: input.value, text: text}).get()
	.then(
		async (res)=> {
			console.log(res);
			let result = res.result;
			if(result.data.length == 0) {
				// 不存在该分类
				await categorysChild.add({name: input.value, text: text})
				.then(
					 content=> {
						 if(content.result.errCode == 0) {
							 uni.showToast({
							 	title:"添加二级分类成功",
							 	icon:"none"
							 })
							 
							 // 重置输入框
							 input.value = "";
							 // 重新获取二级菜单列表
							 listCategorysChild();
						 }
					 }
				)
				.catch(err=>console.log(err))
			}
			else{
				// 已存在该分类
				uni.showToast({
					title:"这个分类已存在",
					icon:"none"
				})
			}
		}
	)
	.catch(err=>console.log(err))
}

// 编写方法用于删除数据
const removeCategoryChildFn = async (id)=> {
	await categorysChild.where({_id: id}).remove()
	.then(
		res=> {
			let result = res.result;
			if(result.errCode == 0) {
				uni.showToast({
					title:"删除成功",
					icon:"none"
				})
			}
			// 重新获取列表
			listCategorysChild();
		}
	)
	.catch(err=> console.log(err))
}

// 点击删除二级菜单
const removeCategoryChild =  (id)=> {
	uni.showModal({
		title:"警告",
		content:"你要删除这个子分类?",
		success(res){
			if(res.confirm) {
				//执行删除的业务逻辑
				removeCategoryChildFn(id);
			}
		}
	})
}

// 初始化
listCategorys();
listCategorysChild();


</script>

<style lang="scss">
	@import "../topic.scss";
</style>